<template>
  <view style="background-color: #f6f6f6">
    <nut-cell-group>
      <nut-cell
        title="手机号码"
        is-link
        :desc="userInfo.mobile"
        @click="Taro.navigateTo({ url: '/pages/user/mobile/index' })"
      />
      <nut-cell title="地址管理" is-link @click="Taro.navigateTo({ url: '/pages/user/address/index' })" />
      <nut-cell title="擅长类目" is-link desc="未设置" @click="showCategoriesPopup" />
    </nut-cell-group>
    <nut-cell-group>
      <nut-cell title="意见反馈" is-link @click="Taro.navigateTo({ url: '/pages/help/feedback/index' })" />
      <nut-cell title="关于我们" is-link @click="Taro.navigateTo({ url: '/pages/about/index' })" />
    </nut-cell-group>
    <nut-cell-group>
      <nut-cell>
        <nut-button shape="round" style="width: 100%" type="danger" @click="handleLogout">退出登录</nut-button>
      </nut-cell>
    </nut-cell-group>
    <nut-popup
      safe-area-inset-bottom
      title="擅长类目"
      :visible="categoriesPopup"
      closeable
      round
      lock-scroll
      position="bottom"
      @close="categoriesPopup = false"
    >
      <view class="pa-2 mt-10">
        <nut-grid column-num="4" :border="false">
          <nut-grid-item v-for="(cate, index) in categories" :key="index" :icon="cate.icon" :text="cate.name">
          </nut-grid-item>
        </nut-grid>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Taro, { useLoad } from '@tarojs/taro';
import { getPersonalInfoApi, UserType } from '@/api/user';
import { logoutApi } from '@/api/authorize';
import { getCategoriesApi } from '@/api/categories';

const categories = ref([]);
const userInfo = ref<UserType>({ avatar: '', email: '', id: 0, mobile: '', nickname: '', uuid: '' });
const getUserInfo = () => {
  getPersonalInfoApi({}).then((res) => {
    userInfo.value = res.result;
  });
};

const getCategories = () => {
  categories.value = [];
  getCategoriesApi({}).then((res) => {
    if (res.success) {
      categories.value = res.result;
    }
  });
};
const handleLogout = () => {
  logoutApi()
    .then(() => {})
    .finally(() => {
      Taro.setStorageSync('user-info', null);
      Taro.removeStorage({
        key: 'access_token',
        success: () => {
          Taro.reLaunch({
            url: '/pages/tabbar/home/index',
          });
          Taro.removeStorageSync('refresh_token');
        },
      });
    });
};
const categoriesPopup = ref(false);
const showCategoriesPopup = () => {
  getCategories();
  categoriesPopup.value = true;
};
useLoad(() => {
  getUserInfo();
});
</script>

<style lang="less" scoped></style>
